<template>
  <div class="son">
    <div class="left">
      <h1>{{ son }}</h1>
      <span>获取父组件的值：{{ value }}</span>
      <p>{{ data }}</p>
      <button @click="toParent">子组件向父组件传值</button>
      <button @click="changesize">子组件向兄弟组件传值{{ arg }}</button>
      <div>接收twoson传过来的值 : {{ twovalue }}</div>
    </div>
    <div class="right">
      <p>vue中this.$nextTick()</p>
      <button ref="tar" type="button" name="button" @click="testClick">
        {{ content }}
      </button>
      <p>
        this.$nextTick这个方法作用是当数据被修改后使用这个方法会回调获取更新后的dom再渲染出来
      </p>
    </div>
    <div class="center">
      <h3>插槽 :</h3>
      <h5>
        插槽就是子组件中的提供给父组件使用的一个占位符，用&lt;slot
        &gt;&lt;/slot&gt; 表示，父组件可以在这个占位符中填充任何模板代码，如
        HTML、组件等，填充的内容会替换子组件的&lt;slot&gt;&lt;/slot&gt;标签。
      </h5>
      <div>
        <h3>今天天气状况：</h3>
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
import eventbus from "./eventbus.js";

export default {
  name: "value",
  components: {},
  data() {
    return {
      content: "初始值",
      son: "我是第一个子组件？？？",
      value: this.propsvalue,
      data: "10",
      arg: "兄弟值",
      twovalue: "ssss",
    };
  },
  props: {
    propsvalue: {
      require: true,
    },
  },
  methods: {
    testClick() {
      alert("sss");
      this.content = "改变了的值"; // 这时候直接打印的话，由于dom元素还没更新 // 因此打印出来的还是未改变之前的值
      console.log(this.$refs.tar.innerText); // 初始值
      this.$nextTick(() => {
        // dom元素更新后执行，因此这里能正确打印更改之后的值
        console.log(this.$refs.tar.innerText); // 改变了的值
      });
    },
    toParent() {
      this.$emit("event1", this.data);
    },
    changesize() {
      eventbus.$emit("add", this.arg);
    },
  },
  created() {
    // 接收twoson传过来的值
    eventbus.$on("twovalue", (message) => {
      this.twovalue = message;
    });
  },
  computed: {},
};
</script>

<style lang="less" scoped>
// .sales-board-des {
//   border-top: 20px solid #f0f2f5;
//   padding: 15px 20px;
// }
.son {
  width: 1800px;
  height: 300px;
  border: 1px solid rgb(212, 101, 101);
  button {
    display: block;
    height: 30px;
    width: 180px;
    background: rgb(205, 206, 209);
    border-radius: 10px;
    margin-top: 20px;
  }
  .left {
    float: left;
  }
  .center {
    float: left;
    width: 400px;
    height: 280px;
    margin-top: 20px;
    border: 2px solid rgb(255, 0, 157);
  }
  .right {
    float: right;
    width: 400px;
    height: 150px;
    margin: 50px 50px auto;
    border: 1px solid rgb(200, 255, 0);
  }
}
</style>